<template>
    <div>
        <el-page-header @back="$router.back()" content="商品详情"></el-page-header>
        <!-- 商品基本信息 -->
        <product-basic ref='productBasic' :product-info='productInfo'></product-basic>
        <!-- 商品规格 -->
        <attr-detail ref='attrDetail' :product-info='productInfo'></attr-detail>
        <!-- 商品详情 -->
        <product-detail ref='productDetails' :product-info='productInfo'></product-detail>
        <!--  -->
        <el-button type='primary' class="mt15" @click='test'>保 存 设 置</el-button>
    </div>
</template>

<script>
    import attrDetail from './components/attr-detail.vue';
    import productDetail from './components/product-detail.vue';
    import productBasic from './components/product-basic.vue';
    import {toast} from '@u'
    export default {
        components : {
            attrDetail,
            productDetail,
            productBasic,
        },

        data () {
            return {
               productInfo : null,
            }
        },
        created () {
            this.$store.commit('resetProduct');

            if (this.$route.params.id) {
                this.__api.commodity.productInfo({
                    id : this.$route.params.id
                }).then(res => {
                    this.productInfo = res;
                    this.$store.commit('setSelectAttrIds', res.specs_select_json.map(v => v.id))
                })
            }
        },

        methods : {
            async test () {
                //校验基本信息是否填写
                let basicCheck = await this.$refs.productBasic.checkBasicInfo();
                if (!basicCheck) {
                    toast('请填写商品基本信息', 'error');
                    return;
                }
                //校验规格是否设置
                let productAttrs = this.$refs.attrDetail.getPerpertiesData();
                if (!productAttrs) {
                    toast('请至少设置一种商品规格，并填写每个规格的相关属性', 'error');
                    return;
                }

                
                //校验商品详情是否填写
                let content = this.$refs.productDetails.getProductDetails();
                if (!content) {
                    toast('请上传商品详情图片', 'error');
                    return;
                }
                

                let promise = this.$route.params.id ? this.__api.commodity.productUpdate : this.__api.commodity.productCreate;

                let params = this.$route.params.id ? {
                    id : this.$route.params.id,
                    ...this.$refs.productBasic.formData,
                    specs_select_json : productAttrs.specs_select_json,
                    specs_combination_json : productAttrs.specs_combination_json,
                    content,
                } : {
                    ...this.$refs.productBasic.formData,
                    specs_select_json : productAttrs.specs_select_json,
                    specs_combination_json : productAttrs.specs_combination_json,
                    content,
                }

                promise(params).then(_ => {
                    toast('操作成功');
                    this.$router.back();
                })
            },  
        }
    }
</script>

<style lang='less' scoped>

</style>